<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <div id="app">
        <ul>
            <li v-for="arcle in articles">
                <h2>{{arcle.title}}</h2>
                <div class="summary">{{arcle.summary|readMore(56,'...')}}</div>
                <div class="more"></div>
            </li>
        </ul>
    </div>
    <script src="/JS文件/vue.js"></script>

    <script>
        Vue.filter('readMore',function(text,length,suffix){
            return text.substring(0,length)+suffix
        })
        var vm = new Vue({
            el:'#app',
            data(){
                return {
                    articles:[{
                        title:'Vue.js 过滤器',
                        summary:'简单介绍一下过滤器，顾名思义，过滤就是一个数据经过了这个过滤之后出来另一样东西，可以是从中取得你想要的，或者给那个数据添加点什么装饰，那么过滤器则是过滤的工具。例如，从[abc,abd,ade]数组中取得包含‘ab’的值，那么可通过过滤器筛选出来‘abc’和‘abd’；把‘Hello’变成‘Hello World’，那么可用过滤器给值‘Hello’后面添加上‘ World’；或者把时间节点改为时间戳等等都可以使用过滤器。'
                    }]
                }
            }
        })
    </script>
</body>
</html>